<!--
/**
* Author: gaohui
* Date: 2023-03-31 16:30
* Desc: ChatGPTDemo chatGPT请求
*/
-->

<template>
  <div class="mt10">
    <title-line title="chatGPT请求" />
    <el-input v-model="str" type="textarea" placeholder="请输入" :rows="4" maxlength="100" />
    <el-button class="mt10" @click.stop="sendMessage">发送数据</el-button>
    <div class="mt10 contentBox" v-html="parseStr"></div>
  </div>
</template>

<script name="ChatGPTDemo" lang="ts" setup>
import { ref } from "vue";
import { chatWithChatGPT } from "@/utils/openAI";
import { showMessage, showLoading, hideLoading } from "@/utils/msgUtil";

const str = ref("帮我用中文写一段关于父爱的诗，字数不超过100");
const parseStr = ref("");

const sendMessage = async () => {
  showLoading();
  try {
    const res = await chatWithChatGPT(str.value);
    console.log(res);
    handleRes(res);
    showMessage("请求成功！");
  } catch (err) {
    console.log(err, "err");
  }
  hideLoading();
};

const handleRes = (res) => {
  const { choices } = res?.data;
  const str = choices?.[0]?.message?.content;
  parseStr.value = str;
};
</script>
<style lang="scss" scoped>
.contentBox {
  width: 100%;
  min-height: 50px;
  border: 1px solid #e3e3e3;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
}
</style>
